<template>
  <div class="box">
    <h2 class="h" style="color:#f49">成绩列表</h2>
    <div class="search">
      <!-- input -->
      <el-input class="search-input" v-model="input" placeholder="请输入学员名字" clearable />
      <!-- 多选框项目类型 -->
      <el-cascader class="search-checkall" v-model="item" :options="itemVal" @change="handleChange"
        placeholder="选择项目类型" />
      <!-- 多选框对应班级 -->
      <el-cascader class="search-checkall" v-model="classes" :options="classesVal" @change="handleChange"
        placeholder="选择班级" />
      <!-- 选择分数类别 -->
      <el-cascader class="search-checkall" v-model="number" :options="numberVal" @change="handleChange"
        placeholder="选择分数类别" />

      <!-- 搜索重置 -->
      <div class="search-search">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="info" plain @click="resetting">重置</el-button>

      </div>
    </div>



    <template v-if="data[0]">
      <div class="main">
        <div class="main-tab">
          <el-table :data="data" style="width: 100%;">
            <el-table-column prop="" label="序号" />
            <el-table-column prop="name" label="项目标题" />
            <el-table-column prop="type" label="项目分类" />
            <el-table-column prop="address" label="项目地址" />

            <el-table-column v-slot="{ row }" label="发布时间">
              <span> {{ row.time.slice(0, 10) }}</span>
            </el-table-column>

            <el-table-column prop="" label="二维码" />
            <el-table-column prop="class" label="班级" />

            <el-table-column v-slot="{ row }" label="学员名称">
              <span>{{ row.author.username }}</span>
            </el-table-column>


            <el-table-column prop="score" label="分数" />
            <el-table-column prop="" label="操作">
              <button>查看</button>
            </el-table-column>
          </el-table>
        </div>



      </div>
    </template>
    <template v-else>
      暂无数据
    </template>



  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import axios from "axios"

let input = ref("")//输入框

let item = ref("")//多选框项目

let classes = ref([])//多选框班级
let number = ref()//分数类别

let tk = ref("")

let data = ref([])


// let data = ref([
//   {
//     "id": 1,
//     "项目标题": "学员成绩管理系统",
//     "项目细节": "1,2,3",
//     "项目地址": "http://localhost:8800/grade/add",
//     "项目分类": "Vue3",
//     "学员名称": "zkl",
//     "发布时间": "2023-02-15",
//     "二维码": "…jRhMngDxjR7Kf2LgM+Qcp4QMNXNFc2wAAAABJRU5ErkJggg==",
//     "班级": "html5_2023_01",
//     "分数": "88"
//   },
//   {
//     "id": 2,
//     "项目标题": "12332132",
//     "项目细节": "1. pinia2. ts 3. 组件封装",
//     "项目地址": "http://localhost:8800/grade/add",
//     "项目分类": "Vue3",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-15",
//     "班级": "html5_2023_01",
//     "分数": "70"
//   },
//   {
//     "id": 3,
//     "项目标题": "122112",
//     "项目细节": "3333",
//     "项目地址": "http://localhost:8800/grade/add",
//     "项目分类": "Vue3",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-15",
//     "班级": "html5_2023_01",
//     "分数": "36"
//   },
//   {
//     "id": 4,
//     "项目标题": "111",
//     "项目细节": "1.2.3.4.5.",
//     "项目地址": "231232",
//     "项目分类": "React",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-17",
//     "班级": "html5_2023_01",
//     "分数": "68"
//   },
//   {
//     "id": 4,
//     "项目标题": "111",
//     "项目细节": "1.2.3.4.5.",
//     "项目地址": "231232",
//     "项目分类": "React",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-17",
//     "班级": "html5_2023_01",
//     "分数": "68"
//   },
//   {
//     "id": 5,
//     "项目标题": "21312",
//     "项目细节": "123",
//     "项目地址": "32132312",
//     "项目分类": "React",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-17",
//     "班级": "html5_2023_01",
//     "分数": "30"
//   },
//   {
//     "id": 6,
//     "项目标题": "1231",
//     "项目细节": "12",
//     "项目地址": "12312",
//     "项目分类": "原生",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-17",
//     "班级": "html5_2023_03",
//     "分数": "58"
//   },
//   {
//     "id": 7,
//     "项目标题": "1231",
//     "项目细节": "12",
//     "项目地址": "12312",
//     "项目分类": "原生",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-17",
//     "班级": "html5_2023_03",
//     "分数": "58"
//   },
//   {
//     "id": 8,
//     "项目标题": "212121",
//     "项目细节": "12",
//     "项目地址": "12122请问驱蚊器无群无",
//     "项目分类": "Vue2",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-17",
//     "班级": "html5_2023_03",
//     "分数": "1"
//   },
//   {
//     "id": 9,
//     "项目标题": "project",
//     "项目细节": "12345上山打老虎",
//     "项目地址": "adress",
//     "项目分类": "React",
//     "学员名称": "超级管理员",
//     "发布时间": "2023-02-17",
//     "班级": "html5_2023_02",
//     "分数": "100"
//   },
//   {
//     "id": 10,
//     "项目标题": "放假项目121",
//     "项目细节": "测试1565",
//     "项目地址": "htttps://www.baidu.com",
//     "项目分类": "原生",
//     "学员名称": "a123456",
//     "发布时间": "2023-02-18",
//     "班级": "test_2023_01",
//     "分数": "100"
//   }
// ])//获取的成绩数组
// let dataCopy = ref([
//   {
//     "id": 1,
//     "项目标题": "学员成绩管理系统",
//     "项目细节": "1,2,3",
//     "项目地址": "http://localhost:8800/grade/add",
//     "项目分类": "Vue3",
//     "学员名称": "zkl",
//     "发布时间": "2023-02-15",
//     "二维码": "…jRhMngDxjR7Kf2LgM+Qcp4QMNXNFc2wAAAABJRU5ErkJggg==",
//     "班级": "html5_2023_01",
//     "分数": "88"
//   },
//   {
//     "id": 2,
//     "项目标题": "12332132",
//     "项目细节": "1. pinia2. ts 3. 组件封装",
//     "项目地址": "http://localhost:8800/grade/add",
//     "项目分类": "Vue3",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-15",
//     "班级": "html5_2023_01",
//     "分数": "70"
//   },
//   {
//     "id": 3,
//     "项目标题": "122112",
//     "项目细节": "3333",
//     "项目地址": "http://localhost:8800/grade/add",
//     "项目分类": "Vue3",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-15",
//     "班级": "html5_2023_01",
//     "分数": "36"
//   },
//   {
//     "id": 4,
//     "项目标题": "111",
//     "项目细节": "1.2.3.4.5.",
//     "项目地址": "231232",
//     "项目分类": "React",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-17",
//     "班级": "html5_2023_01",
//     "分数": "68"
//   },
//   {
//     "id": 4,
//     "项目标题": "111",
//     "项目细节": "1.2.3.4.5.",
//     "项目地址": "231232",
//     "项目分类": "React",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-17",
//     "班级": "html5_2023_01",
//     "分数": "68"
//   },
//   {
//     "id": 5,
//     "项目标题": "21312",
//     "项目细节": "123",
//     "项目地址": "32132312",
//     "项目分类": "React",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-17",
//     "班级": "html5_2023_01",
//     "分数": "30"
//   },
//   {
//     "id": 6,
//     "项目标题": "1231",
//     "项目细节": "12",
//     "项目地址": "12312",
//     "项目分类": "原生",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-17",
//     "班级": "html5_2023_03",
//     "分数": "58"
//   },
//   {
//     "id": 7,
//     "项目标题": "1231",
//     "项目细节": "12",
//     "项目地址": "12312",
//     "项目分类": "原生",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-17",
//     "班级": "html5_2023_03",
//     "分数": "58"
//   },
//   {
//     "id": 8,
//     "项目标题": "212121",
//     "项目细节": "12",
//     "项目地址": "12122请问驱蚊器无群无",
//     "项目分类": "Vue2",
//     "学员名称": "huahua123",
//     "发布时间": "2023-02-17",
//     "班级": "html5_2023_03",
//     "分数": "1"
//   },
//   {
//     "id": 9,
//     "项目标题": "project",
//     "项目细节": "12345上山打老虎",
//     "项目地址": "adress",
//     "项目分类": "React",
//     "学员名称": "超级管理员",
//     "发布时间": "2023-02-17",
//     "班级": "html5_2023_02",
//     "分数": "100"
//   },
//   {
//     "id": 10,
//     "项目标题": "放假项目121",
//     "项目细节": "测试1565",
//     "项目地址": "htttps://www.baidu.com",
//     "项目分类": "原生",
//     "学员名称": "a123456",
//     "发布时间": "2023-02-18",
//     "班级": "test_2023_01",
//     "分数": "100"
//   }
// ])//获取的成绩数组

const itemVal = [//项目类型多选数据
  {
    value: '1',
    label: 'Vue2',
  },
  {
    value: '2',
    label: 'Vue3',
  },
  {
    value: '3',
    label: 'React',
  },
  {
    value: '4',
    label: '小程序',
  },
  {
    value: '5',
    label: 'JavaScript',
  },
  {
    value: '6',
    label: '其他',
  },
]
const classesVal = [//班级多选数据
  {
    value: 'html5_2023_01',
    label: 'html5_2023_01',
  },
  {
    value: 'html5_2023_03',
    label: 'html5_2023_03',
  },
  {
    value: 'html5_2023_02',
    label: 'html5_2023_02',
  },
  {
    value: 'test_2023_01',
    label: 'test_2023_01',
  },
  {
    value: '人工智能AI_2026_05',
    label: '人工智能AI_2026_05',
  },
  {
    value: 'HTML5大前端_2023_02',
    label: 'HTML5大前端_2023_02',
  },
  {
    value: 'HTML5大前端_2023_03',
    label: 'HTML5大前端_2023_03',
  },
  {
    value: 'JAVA大后端_2023_01',
    label: 'JAVA大后端_2023_01',
  },
  {
    value: 'HTML5大前端_2024_27',
    label: 'HTML5大前端_2024_27',
  },
  {
    value: '测试_2023_01',
    label: '测试_2023_01',
  },
  {
    value: '放牛_2023_16',
    label: '放牛_2023_16',
  },
  {
    value: '放牛_2019_03',
    label: '放牛_2019_03',
  },
  {
    value: 'HTML5大前端_2023_01',
    label: 'HTML5大前端_2023_01',
  },
]
const numberVal = [//分数类别
  {
    value: 'A',
    label: '90分区间',
  },
  {
    value: 'B',
    label: '80分区间',
  },
  {
    value: 'C',
    label: '70分区间',
  },
  {
    value: 'D',
    label: '60分区间',
  },
  {
    value: 'E',
    label: '不及格',
  },
  {
    value: 'F',
    label: '未打分',
  },
]

let ax = (type, url, tk, data) => {//请求方法
  let res = axios({
    url: url,
    method: type,
    headers: {
      token: tk
    },
    data: data
  })

  return res
}

let search = async () => {//搜索事件
  searchMethod({ keyword: input.value, type: item.value[0], class: classes.value[0], score: number.value[0] })

}

let searchMethod = async (info) => {//搜索方法
  let res = await ax("post", "http://81.69.235.62:3000/api/getallgrades", JSON.parse(localStorage.getItem("good")).userInfo.token, info)
  if (res.data.code == 200) {
    data.value = res.data.result
  }
}

let gitResultList = async () => {//获取数据方法
  let getallgrades = await ax("post", "http://81.69.235.62:3000/api/getallgrades", JSON.parse(localStorage.getItem("good")).userInfo.token)

  if (getallgrades.data.code == 200) {
    data.value = getallgrades.data.result
    console.log("项目成绩", getallgrades);
  }
}

let resetting = async () => {//重置事件
  input.value = ""//重置数据
  item.value = []
  classes.value = []
  number.value = ""
  gitResultList()//获取项目成绩列表
}

onMounted(async () => {
  tk.value = JSON.parse(localStorage.getItem("good")).userInfo.token

  // git项目成绩
  gitResultList()
})

</script>

<style lang="scss" scoped>
.h {
  font-size: 25px;
  font-weight: 600;
}

.search {
  width: 100%;
  height: 50px;
  margin-top: 10px;
  overflow: hidden;

  ::v-deep(div) {
    margin-left: 10px;
  }

  ::v-deep(.search-input, ) {
    width: 250px;

    float: left;
  }

  ::v-deep(.search-checkall) {
    width: 250px;
    height: 35px;
    float: left;
  }

  ::v-deep(.el-date-editor) {
    float: left;
    margin-left: 10px;
  }

  .search-search {
    float: left;
    margin-left: 100px;
  }
}

.main {
  width: 100%;
  height: 100%;
  border: 1px solid gray;
  margin-top: 10px;
  overflow: auto;

  :v-deep(.main-tab) {
    text-align: center;
  }
}

:v-deep(.content) {
  margin: 0;
}
</style>